<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const formState = reactive({
    date: '',
    hour: false,
  });

  const columns = [
    { title: '监测站', dataIndex: 'station', key: 'station', width: 150, align: 'center' },
    { title: '电能(kWh)/占比', dataIndex: 'electric', key: 'electric', align: 'center' },
    { title: '水能(m³)/占比', dataIndex: 'water', key: 'water', align: 'center' },
    { title: '气能(m³)/占比', dataIndex: 'gas', key: 'gas', align: 'center' },
    { title: '热能(GJ)/占比', dataIndex: 'heat', key: 'heat', align: 'center' },
    { title: '冷能(GJ)/占比', dataIndex: 'cold', key: 'cold', align: 'center' },
  ];

  const tableData = ref([
    {
      station: '公司总部',
      electric: '2000/100%',
      water: '1000/100%',
      gas: '4000/100%',
      heat: '3000/100%',
      cold: '2400/100%',
      children: [
        {
          station: '部门A',
          electric: '1000/50%',
          water: '500/50%',
          gas: '2000/00%',
          heat: '1500/50%',
          cold: '1200/50%',
          children: [
            {
              station: '组1',
              electric: '500/50%',
              water: '250/50%',
              gas: '1000/50%',
              heat: '750/50%',
              cold: '600/50%',
            },
            {
              station: '组2',
              electric: '500/50%',
              water: '250/50%',
              gas: '1000/50%',
              heat: '750/50%',
              cold: '600/50%',
            },
          ],
        },
        {
          station: '部门B',
          electric: '1000/50%',
          water: '500/50%',
          gas: '2000/00%',
          heat: '1500/50%',
          cold: '1200/50%',
          children: [
            {
              station: '组3',
              electric: '500/50%',
              water: '250/50%',
              gas: '1000/50%',
              heat: '750/50%',
              cold: '600/50%',
            },
            {
              station: '组4',
              electric: '500/50%',
              water: '250/50%',
              gas: '1000/50%',
              heat: '750/50%',
              cold: '600/50%',
            },
          ],
        },
      ],
    },
  ]);

  const companyOption = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });

  const department1Option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });

  const department2Option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });

  const group1Option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });

  const group2Option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });

  const group3Option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });

  const group4Option = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['电能', '水能', '气能', '热能', '冷能'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  });
</script>

<template>
  <div class="container">
    <div class="condition">
      <div class="formState">
        <span>时间选择:</span>
        <a-range-picker v-model:value="formState.date" />

        <a-checkbox v-model:checked="formState.hour">时</a-checkbox>

        <a-button type="primary">查询</a-button>
      </div>
    </div>

    <div class="info">
      <div class="left">
        <a-card>
          <div class="total">
            <span> 各监测站能耗总计:</span>
          </div>

          <a-table :columns="columns" :data-source="tableData" :defaultExpandAllRows="true" rowKey="id"></a-table>
        </a-card>
      </div>

      <div class="right">
        <a-card title="能耗值曲线图/柱状图">
          <div class="rightCharts">
            <div class="charts">
              <span> 公司总部能耗多类柱状图 </span>
              <div class="chart">
                <eChart :option="companyOption" name="companyOption" />
              </div>
            </div>
            <div class="charts">
              <span> 部门A能耗多类柱状图 </span>
              <div class="chart">
                <eChart :option="department1Option" name="department1Option" />
              </div>
            </div>
            <div class="charts">
              <span> 部门B能耗多类柱状图 </span>
              <div class="chart">
                <eChart :option="department2Option" name="department2Option" />
              </div>
            </div>
            <div class="charts">
              <span> 组1能耗多类柱状图 </span>
              <div class="chart">
                <eChart :option="group1Option" name="group1Option" />
              </div>
            </div>
            <div class="charts">
              <span> 组2能耗多类柱状图 </span>
              <div class="chart">
                <eChart :option="group2Option" name="group2Option" />
              </div>
            </div>
            <div class="charts">
              <span> 组3能耗多类柱状图 </span>
              <div class="chart">
                <eChart :option="group3Option" name="group3Option" />
              </div>
            </div>
            <div class="charts">
              <span> 组4能耗多类柱状图 </span>
              <div class="chart">
                <eChart :option="group4Option" name="group4Option" />
              </div>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .formState {
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      margin: 0 10px;
    }

    .ant-select {
      width: 250px;
    }

    .ant-checkbox-wrapper {
      margin: 0 0 0 20px;
    }

    button {
      margin-left: 20px;
    }
  }

  .info {
    display: flex;
    .left {
      width: 50%;
      margin: 0 5px;

      .total {
        margin: 0 0 15px 0;
        font-size: 16px;
      }
      .ant-card {
        width: 100%;
        min-height: 80vh;
      }
    }

    .right {
      width: 50%;
      margin: 0 5px;

      .ant-card {
        width: 100%;
        height: 50%;
        min-height: 80vh;
        overflow: auto;
        .rightCharts {
          display: flex;
          flex-wrap: wrap;

          .charts {
            width: 50%;
            margin-top: 10px;
            .chart {
              width: 100%;
              height: 20vh;
              margin-top: 5px;
            }
            &:nth-of-type(1) {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
